<template>
	<view class="viewSpaceBetween">
		<view class="column" :style="{'width':columnWidth+'%'}" v-for="(itemTab,indexTab) in tabList"
			v-bind:key="indexTab">
			<view class="ticket-box" v-for="(item,index) in itemTab" v-bind:key="index">
				<item-box class="u-flex u-row-center" :padding="28">
					<view class="">
						<view class="u-position-relative u-flex u-row-center">
							<item-image :img="item.image" :width="imageWidth" :height="imageHeight" :radius="10"
								@click.native="previewBanner(item.sliderImage)" />
							<view class="left-tag" v-if="item.issueModeName">
								<item-image :img="item.tagImage" :width="90" :height="90" :radius="0"></item-image>
							</view>
						</view>
						<view class="u-padding-top-20 text-white u-font-26 item-name u-line-2 u-margin-bottom-20">
							{{item.name}}</view>
						<view class="tag u-flex u-flex-wrap u-margin-bottom-10" v-if="item.categoryDescription.length">
							<view class="u-margin-right-10 u-margin-bottom-10 "
								v-for="(c,i) in item.categoryDescription" :key="i">
								<u-tag :text="c" size="mini" shape="circle" bg-color="#484850" border-color="#484850"
									color="#D0D2F9" />
							</view>
						</view>
						<view class="u-margin-bottom-20 u-flex">
							<text class="u-font-28 text-white">￥{{item.exhibitPrice || 0}}</text>
							<view class="u-font-24 text-color-777584 u-padding-left-24 price-item">￥{{item.price}}
							</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="text-color-A6A8CD u-font-22">
								<view>{{item.sales || 0}}人</view>
								<view>已付款</view>
							</view>
							<view class="u-padding-top-24 u-padding-bottom-10" v-if="isGroupBuy">
								<view class="groupBuy-btn" @click="goBuy(item)">参加团购</view>
							</view>
							<view class="u-flex" v-if="isNov">
								<view class="car-btn" @click="addCar(item)">
									<u-icon name="gouwuche" custom-prefix="custom-icon" size="30" color="white">
									</u-icon>
								</view>
								<view class="buy-btn u-font-28" @click="goBuy(item)">购买</view>
							</view>
						</view>
					</view>
				</item-box>
			</view>
		</view>


		<!--下段代码是预加载，渲染出来后遍能读取到组件的属性了，然后进行排版
		 想要代码简单且通用，就需要牺牲一些东西-->
		<scroll-view style="height: 0rpx;">
			<view class="ticket-box" :id="'child'+index" v-for="(item,index) in list" v-bind:key="index">
				<item-box class="u-flex u-row-center" :padding="28">
					<view class="">
						<view class="u-position-relative">
							<item-image :img="item.image" :width="imageWidth" :height="imageHeight" :radius="10"
								@click.native="previewBanner(item.sliderImage)" />
							<view class="left-tag" v-if="item.issueModeName">
								<item-image :img="item.tagImage" :width="90" :height="90" :radius="0"></item-image>
							</view>
						</view>
						<view class="u-padding-top-20 text-white u-font-26 item-name u-line-2 u-margin-bottom-20">
							{{item.name}}</view>
						<view class="tag u-flex u-flex-wrap u-margin-bottom-10" v-if="item.categoryDescription.length">
							<view class="u-margin-right-10 u-margin-bottom-10 "
								v-for="(c,i) in item.categoryDescription" :key="i">
								<u-tag :text="c" size="mini" shape="circle" bg-color="#484850" border-color="#484850"
									color="#D0D2F9" />
							</view>
						</view>
						<view class="u-margin-bottom-20 u-flex">
							<text class="u-font-28 text-white">￥{{item.exhibitPrice || 0}}</text>
							<view class="u-font-24 text-color-777584 u-padding-left-24 price-item">￥{{item.price}}
							</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="text-color-A6A8CD u-font-22">
								<view>{{item.sales || 0}}人</view>
								<view>已付款</view>
							</view>
							<view class="u-padding-top-24 u-padding-bottom-10" v-if="isGroupBuy">
								<view class="groupBuy-btn" @click="goBuy(item)">参加团购</view>
							</view>
							<view class="u-flex" v-if="isNov">
								<view class="car-btn" @click="addCar(item)">
									<u-icon name="gouwuche" custom-prefix="custom-icon" size="30" color="white">
									</u-icon>
								</view>
								<view class="buy-btn u-font-28" @click="goBuy(item)">购买</view>
							</view>
						</view>
					</view>
				</item-box>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import flowLayout from '@/mixins/eiml-flow-layout.js'
	export default {
		mixins:[flowLayout]
	}
</script>

<style lang="scss" scoped>
	.viewSpaceBetween {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: flex-start;
	}

	.column {
		flex-grow: 1;
	}

	.price {
		color: #808080;
		text-decoration: line-through;
		white-space: nowrap;
	}

	.groupBuy-btn {
		line-height: 74rpx;
		color: white;
		text-align: center;
		background: #765CFE;
		border-radius: 37rpx;
	}

	.ticket-content {
		flex-wrap: wrap;
	}

	.ticket-box {
		box-sizing: border-box;
		padding: 10rpx;
		flex-shrink: 0;
	}

	.activity-btn {
		right: 0;
		top: 200rpx;
		line-height: 70rpx;
		padding: 0 10rpx 0 20rpx;
		background-color: var(--theme-color);
		color: var(--reversal-color);
		border-radius: 50rpx 0 0 50rpx;
	}

	.buy-btn {
		background-color: var(--theme-color);
		color: var(--reversal-color);
		border-radius: 0 50rpx 50rpx 0;
		width: 100rpx;
		line-height: 50rpx;
		height: 50rpx;
		text-align: center;
	}

	.car-btn {
		width: 71rpx;
		height: 50rpx;
		border-radius: 50rpx 0 0 50rpx;
		border: 1rpx solid #FFFFFF;
		border-right: none;
		text-align: center;
		line-height: 50rpx;
	}

	.car {
		position: fixed;
		bottom: 200rpx;
		right: 0;
		z-index: 55;
		width: 74rpx;
		height: 56rpx;
		background: var(--theme-color);
		border-radius: 50rpx 0 0 50rpx;
	}

	.left-tag {
		position: absolute;
		left: 0;
		top: 0;
	}

	.price-item {
		text-decoration: line-through;
	}
</style>
